<!-- statusBar -->
<template>
    <div class="status-bar">
      <div class="env-wrapper">
        <statusBox>
            
        </statusBox>
      </div>
    </div>
</template>

<script>
import { envServer as env } from 'anov-core'
import statusBox from './status-box'
export default {
    name: 'statusBar',
    components: {
        statusBox
    },
    data() {
        return {
            dataList: [],
            statusMenuFlag: false
        };
    },
    computed: {
        ...env.mapState(['statusBarData', 'resolution']),
    },
    watch: {
        statusBarData: {
            handler: function(){
                this.init()
            },
            deep: true
        }
    },
    methods: {
        init(){
            let w = this.resolution.w;
            let arr = JSON.parse(JSON.stringify(this.statusBarData));
            if(w < 2000){
              for(let i = 0; i < arr.length; i++){
                arr[i].isShow = false
              }
              this.dataList = arr
            }else {
              this.dataList = arr
            }
        },
        statusBarClick(e){
            // this.statusMenuFlag = true;
            // console.log(this.$refs.statusMenu.style)
            // this.$refs.statusMenu.style.left = e.clientX + 300
            // this.$refs.statusMenu.style.top = e.clientY
        }
    },
    created() {

    },
    mounted() {
        this.init();
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
@import '../style/panel-var.scss';
@import '../style/panel-mixin.scss';
 .status-bar {
    position: relative;
    width: 100%;
    height: 32px;
    box-sizing: border-box;
    border: 1px solid #293135;
    border-top: none;
    background: #111215;
    .env-wrapper{
      height: 32px;
      @include flex(row, flex-end);
      .env-box{
        height: 32px;
        margin: 0 20px;
        @include flex(row, flex-end);
        li{
          a{
            color: rgba(193, 255, 251, 0.6);
          }
        }
        li.list{
          .status-item-text{
            padding-right: 5px;
          }
          &::after {
            position: relative;
            top: 1px;
            display: inline-block;
            content: '';
            width: 1px;
            height: 10px;
            margin: 0 10px;
            background: rgba(193, 255, 251, 0.6);
          }
          &:last-child{
            &::after {
              width: 0;
            }
          }
        }
        .foot-nav--icon{
          min-width: 0;
        }
        
      }
      .only-icon {
        margin: 0 5px;
      }
    }
    
  }
  .platformicon {
  margin-right: 8px;
}
.status-menu-wrapper {
    position: absolute;
    width: 100px;
    height: 200px;
    background: #fff;
}
</style>